<template>
  <div style="text-align:center;">
    <div
      class="dataCount"
      v-for="(item, index) in cardCountData"
      :key="index"
      :style="{ width: countWidth }">
      <div class="dataCountTitle">{{ item.title }}</div>
      <div class="dataCountContent">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    countWidth: {
      type: String,
      default: "260px"
    },
    cardCountData: {
      type: Array
    }
  }
};
</script>

<style lang="less">
.dataCount {
  display: inline-block;
  padding: 0.3rem;
  margin: 0.75rem 0.75rem;
  color: #20d1d2;
  height: 6vh;
  vertical-align: middle;
  // border: 1px solid #1081b2;
  border-radius: 4px;
}
.dataCountTitle {
  font-size: 2rem;
  height: 24px;
  line-height: 24px;
  color: #fff;
}
.dataCountContent {
  font-size: 3rem;
  margin-top: 10px;
  color: yellow;
  height: 3rem;
  line-height: 3rem;
}
</style>
